<template>
	<view>
		<view class="date-content">
			<view class="divider"></view>

			<view class="date-info">
				<view class="calendar-content">
					<view>
						<!-- 插入模式 -->
						<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false"
							@change="onCalendarChange" @monthSwitch="monthSwitch" />
					</view>
				</view>
			</view>

			<uni-drawer ref="showRightRef" mode="right" :mask-click="false" @change="changeShowRightStatus($event)">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="info-content">
							<!-- 地块选择 -->
							<uni-section title="选择地块" type="line">
								<uni-data-checkbox multiple v-model="selectedPlots"
									:localdata="plots"></uni-data-checkbox>
							</uni-section>

							<!-- 作物品种选择 -->
							<uni-section title="选择作物品种" type="line">
								<uni-data-checkbox multiple v-model="selectedCrops"
									:localdata="crops"></uni-data-checkbox>
							</uni-section>

							<!-- 状态选择（单选，默认全部） -->
							<uni-section title="选择状态" type="line">
								<uni-data-checkbox v-model="selectedStatus"
									:localdata="statusOptions"></uni-data-checkbox>
							</uni-section>

							<!-- 							<view class="close">
								<button @click="closeDrawer()">
									<text class="word-btn-white">关闭</text>
								</button>
							</view> -->
							<!-- 提交按钮 -->
							<view class="submit-area">
								<button type="primary" @click="confirmFilter">确认筛选</button>
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>

		<view class="today-tip">
			<view class="today-content">
				今日待办
			</view>

			<view class="divider"></view>

			<view class="history-content">
				<text>历史提醒</text>
				<view class="row-between" v-for="item in 8">
					<text>2025-10-20</text>
					<text>绕蔓</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	const operationList = ref([]);

	const calendar = ref(null)
	const showCalendar = ref(false)

	const showRight = ref(false)
	const showRightRef = ref(null)

	function goToInputCrop() {
		uni.navigateTo({
			url: "/pages/farming/inputCrop/inputCrop",
		});
	}

	// 地块数据（可多选）
	const plots = [{
			text: '地块A',
			value: 'A'
		},
		{
			text: '地块B',
			value: 'B'
		},
		{
			text: '地块C',
			value: 'C'
		}
	]
	const selectedPlots = ref([])

	// 作物品种数据（可多选）
	const crops = [{
			text: '水稻',
			value: 'rice'
		},
		{
			text: '小麦',
			value: 'wheat'
		},
		{
			text: '玉米',
			value: 'corn'
		},
		{
			text: '大豆',
			value: 'soybean'
		}
	]
	const selectedCrops = ref([])

	// 状态数据（单选，默认全部）
	const statusOptions = [{
			text: '全部',
			value: '0'
		},
		{
			text: '计划中',
			value: '1'
		},
		{
			text: '进行中',
			value: '2'
		},
		{
			text: '完成',
			value: '3'
		}
	]
	const selectedStatus = ref('0')

	function fetchOperationList() {
		// 模拟接口返回
		const res = [{
				codeSortId: 121,
				codeValue: "30036",
				name: "整枝打杈",
				contentOne: "default,a_1,a_3,b_2,c_2,c_3,c_4,c_5,c_1,c_6",
				contentTwo: "#ff5583",
			},
			{
				codeSortId: 122,
				codeValue: "30037",
				name: "施肥",
				contentOne: "default,a_2,b_1,c_1,c_2,c_3",
				contentTwo: "#33cc99",
			},
			{
				codeSortId: 123,
				codeValue: "30038",
				name: "灌溉",
				contentOne: "default,b_3,c_1,c_2",
				contentTwo: "#3399ff",
			},
			{
				codeSortId: 124,
				codeValue: "30038",
				name: "灌溉",
				contentOne: "default,b_3,c_1,c_2",
				contentTwo: "#3399ff",
			},
			{
				codeSortId: 125,
				codeValue: "30038",
				name: "灌溉",
				contentOne: "default,b_3,c_1,c_2",
				contentTwo: "#3399ff",
			}
		]

		operationList.value = res;
	}

	function fetchSelectList() {
		info.date = getDate(new Date(), -30).fullDate
		info.startDate = getDate(new Date(), -60).fullDate
		info.endDate = getDate(new Date(), 30).fullDate
		info.selected = [{
				date: getDate(new Date(), -3).fullDate,
				color: '#2979ff',
				info: '打卡'
			},
			{
				date: getDate(new Date(), -2).fullDate,
				info: '签到',
				color: '#fff',
				data: {
					custom: '自定义信息',
					name: '自定义消息头'
				}
			},
			{
				date: getDate(new Date(), -1).fullDate,
				color: '#fff',
				info: '已打卡'
			}
		];
	}

	const info = reactive({
		lunar: true,
		range: true,
		insert: false,
		selected: [],
		date: '',
		startDate: '',
		endDate: ''
	})

	function getDate(date, AddDayCount = 0) {
		if (!date) date = new Date()
		if (typeof date !== 'object') date = date.replace(/-/g, '/')
		const dd = new Date(date)
		dd.setDate(dd.getDate() + AddDayCount)

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
		return {
			fullDate: `${y}-${m}-${d}`,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}


	// 首次加载
	onMounted(() => {
		fetchOperationList();
		fetchSelectList();

	})

	function open() {
		calendar.value?.open()
	}

	function close() {
		console.log('弹窗关闭')
	}

	function onCalendarChange(e) {
		    console.log('点击了具体日期:', e.fulldate)
		// showRightRef.value?.open()
		// 有的版本会带一个 from 字段，值可能是 'calendar' 或 'input'
		if (e.from === 'input') {
			showRightRef.value?.open();
		} else {
			
		}
	}

	function confirm(e) {
		console.log('confirm 返回:', e)
	}

	function monthSwitch(e) {
		console.log('monthSwitch 返回:', e)
	}
	// 打开窗口
	function showDrawer(side) {
		if (side === 'left') {
			showLeftRef.value?.open()
		} else {
			showRightRef.value?.open()
		}
	}

	// 关闭窗口
	function closeDrawer() {
		showRightRef.value?.close()
	}

	// 抽屉状态发生变化
	function changeShowRightStatus(e) {
		showRight.value = e
	}
	// 确认筛选
	function confirmFilter() {
		fetchSelectList();
		closeDrawer();
		console.log('选择的地块:', selectedPlots.value)
		console.log('选择的作物品种:', selectedCrops.value)
		console.log('选择的状态:', selectedStatus.value)
	}
</script>

<style lang="scss" scoped>
	.date-content {
		.condition {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				color: $brand-theme-color;
				display: flex;
				align-items: center;

				:deep() {
					.uni-icons {
						color: $brand-theme-color !important;
					}
				}

			}

			.right {

				:deep() {
					.uni-icons {
						color: $brand-theme-color !important;
					}
				}

				.text {
					color: $uni-color-warning;
					font-weight: 500;
					font-size: 28rpx;

				}
			}
		}

		.divider {
			height: 2rpx;
			background-color: #e0e0e0;
			// margin: 20rpx 0;
		}

		.date-info {
			// padding: 0 30rpx;

			.calendar-content {}
		}

		.uni-drawer {
			.scroll-view {

				// 处理抽屉内容滚动
				.scroll-view-box {
					flex: 1;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;

					.info-content {
						padding: 24rpx;
					}
				}

				.submit-area {
					margin-top: 30rpx;
				}
			}
		}
	}

	.today-tip {
		padding: 30rpx 0;
		display: flex;

		.divider {
			width: 2rpx;
			background-color: #e0e0e0;
			margin: 0 20rpx;
		}

		.today-content {
			width: 300rpx;
		}

		.history-content {
			width: 450rpx;

			.row-between {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #e0e0e0;
				margin-bottom: 10rpx;
				padding: 0 10rpx;
			}
		}
	}
</style>